<template>
        <div class="box">
          <div>
            <van-nav-bar title="仿真模考"  left-arrow @click-left="onClickLeft">
              <template #right>
                <van-icon name="search" size="18"  @click="right"/>
              </template>
            </van-nav-bar>
          </div>

            <div class="sel">
              <div class="type">
                <span @click="type">考试类型</span>
                <span class="sjx" v-if="!show"></span>
                <span class="sjx2" v-if="show"></span>
              </div>
              <div class="type1">
                <span @click="type1">考试状态</span>
                <span class="sjx" v-if="!shows"></span>
                <span class="sjx2" v-if="shows"></span>
              </div>
              <div class="type2">
                <span @click="type2">参考状态</span>
                <span class="sjx" v-if="!showss"></span>
                <span class="sjx2" v-if="showss"></span>
              </div>
            </div>
    <div>
      <van-action-sheet v-model="show" :actions="actions" @select="onSelect" class="content"/>
    </div>
          <div>
            <van-action-sheet v-model="shows" :actions="actionss" @select="onSelect" class="content"/>
          </div>
          <div>
            <van-action-sheet v-model="showss" :actions="actionsss" @select="onSelect" class="content"/>
          </div>

              <div>
                <van-empty
                    class="custom-image"
                    image="https://wap.365msmk.com/img/empty.0d284c2e.png"
                    description="请稍后，模考正在赶来的路上啦"
                />
              </div>
        </div>


</template>

<script>
export default {
  data(){
    return{
        show:false,
        shows:false,
      showss:false,
      actions: [{ name: '全部' }, { name: '模拟考试' }, { name: '参考状态' }],
      actionss: [{ name: '全部' }, { name: '未开始' }, { name: '进行中' },{name:'已结束'}],
      actionsss: [{ name: '全部' }, { name: '已做' }, { name: '未做' },],
    }
  },
  mounted() {

  },
  methods:{
    onClickLeft(){
        this.$router.push('/Practice')
    },
    right(){
        this.$router.push('/search')
    },
    type(){
      this.show=true
    },
    type1(){
      this.shows=true
    },
    type2(){
      this.showss=true
    },
    onSelect(item) {
      this.show = false;
      this.shows=false;
      this.showss=false
      //console.log(item.name)

    },
  }
}
</script>

<style scoped lang="scss">
.box{
  position: relative;
}
.sel{
  width: 100%;
  height: 42px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  align-items: center;
  font-size: 15px;
  justify-content: space-around;
  img{
    width: 15px;
  }
  div{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .sjx{
    margin-top: 12px;
    width: 0;
    border: 10px solid grey;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
  }
  .sjx2{
    margin-top: 2px;
    width: 0;
    border: 10px solid red;
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    //border-bottom: 10px solid transparent;
  }
}
.content {
  position: fixed;
  top:120px;
  height: 180px;
}

</style>